<template>
	<view class="my-layout">
		<uni-nav-bar left-icon="back" title="消息中心" rightText="全部已读" @clickLeft='goback' @clickRight='clearMessage'></uni-nav-bar>
		<view class="my-tabs">
			<view class="tap-plan">
				<text class="plan-text">系统通知</text>
				<uni-badge class="plan-num" :text="sysNum" type="error" size="small"></uni-badge>
			</view>
			<view class="tap-plan">
				<text class="plan-text">公告消息</text>
				<uni-badge class="plan-num" :text="sysNum" type="error" size="small"></uni-badge>
			</view>
		</view>
		<view class="message-list">
			<view class="list-item" v-for="(item,index) in list" :key='index' @tap='goInfoDetails(item)'>
				<text class="item-title">3月4日推广佣金<text class="title-flag"></text></text>
				<view class="item-desc">2020-02-01 12:12:12</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sysNum:66,
				msgNum:99,
				list:[1,1,1,1,1,1,1,1,1,1,1,,1,1,1,1,1,1,1,1,]
			};
		},
		methods: {
			goback() { //返回上一页
				uni.navigateBack({

				})
			},
			clearMessage() { // 清除所有未都信息

			},
			goInfoDetails(){
				uni.navigateTo({
					"url":'/pages/infoCenter/infoDetails/infoDetails',
					fail(e) {
						console.log(e)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.my-layout{
	background-color: #F4F5F9;
}
.my-tabs{
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-bottom: 16rpx;
	background-color: #FFFFFF;
	.tap-plan{
		position: relative;
		height: 95rpx;
		font-size: 30rpx;
		height: 95rpx;
		line-height: 95rpx;
		border-bottom: 4rpx solid #FFFFFF;
		&:hover{
			border-bottom-color: #F59328;
		}
		.plan-text{
			color: #666666;
			&:hover{
				color:#000000;			
			}
		}
		.plan-num{
			position: absolute;
			top: 0rpx;
			right: -50rpx;
		}
	}
}
.message-list{
	.list-item{
		margin-bottom: 10rpx;
		padding: 24rpx 40rpx;
		background-color: #FFFFFF;
		.item-title{
			font-size: 30rpx;
			color: #000000;
			line-height: 42rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			position: relative;
			.title-flag{
				position: absolute;
				right: -10rpx;
				top: 0;
				height: 10rpx;
				width: 10rpx;
				border-radius: 50%;
				background-color: #DD524D;
			}
		}
		.item-desc{
			font-size: 28rpx;
			color: #999999;
			line-height: 40rpx;
		}
	}
}
</style>
